<!--  添加BOM信息-->
<template>
    <el-drawer v-model="makeBomDialogVisible" title="领料" size="60%" :before-close="handleClosed">
        <!--      按物料名称搜索物料信息-->
        <!--        绑定bom的对话框-->
        <bind-b-o-m-dialog @bindSuccess="handleBindSuccess" :visible.sync="binBomDialogVisible" :productId="productId" :bomInfos="bomData" @callClosed="handleBindBomDialogClosed"/>

        <el-form inline>
            <el-form-item label="类型">
                <el-select v-model="queryParams.classify" placeholder="请选择" style="width: 150px">
                    <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="型号">
                <el-input v-model="queryParams.model" placeholder="输入型号"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="queryParams.name" placeholder="输入名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="matData"
                style="width: 100%;"
        >
            <el-table-column prop="id" label="编码">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="model" label="型号">
            </el-table-column>
            <el-table-column prop="unitName" label="单位" width="70">
            </el-table-column>
            <el-table-column prop="classifyName" label="分类">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            :content=" '当前库存：' + (scope.row.count-scope.row.addCount) "
                            placement="top"
                    >
                        <el-input-number v-model="scope.row.addCount" @change="handleAddChange(scope.row)">添加</el-input-number>

                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <div style="margin-bottom: 10px">
                <el-pagination :page-size="10" @change="handleChanged" layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
            <el-button type="primary" @click="handleOpenBindDialog">确定</el-button>
            <el-button @click="handleClosed">取消</el-button>

        </div>
    </el-drawer>
</template>
<script>
import mdAPI from "@/util/request-md/mat-pro/mat-pro.js";
import BindBOMDialog from "@/components/widget/dialog/BindBOMDialog.vue";

export default {
    components: {BindBOMDialog},
    emits: ['callClosed','bindSuccess'],
    props: ['visible','productId'],
    data() {
        return {
            makeBomDialogVisible: false,
            binBomDialogVisible:false,
            total: 0,
            queryParams: {
                name: '',
                classify: -1,
                model: '',
                stockStatus: '1',
                page: 1,
                limit: 10
            },
            matData: [{
                idMat: '10111',
                name: '钢铁',
                model: 'SASCA1001',
                unit: '公斤',
                classify: '化工用品',//分类,
                count: 1
            }],
            localData: [],
            types: [
                {
                    label: '全部',
                    value: -1
                },
                {
                    label: '化合物',
                    value: 0
                },
            ],
            addMap: {
                matId: '',//物料id
                count: 0//物料数量
            },
            bomData:[]
        }
    },
    watch: {
        visible(val) {
            this.makeBomDialogVisible = val;
        }
    },
    methods: {
        handleClosed() {
            this.$emit('callClosed');
        },
        //打开绑定bom的对话框
        handleOpenBindDialog(){
            this.binBomDialogVisible =true;
        },
        //加载历史选项数据
        loadBomSelectedHistory(){
            //看matData中的数据在bomData里是否有存在，如果有，那么就把matData的addCount值更新为bomData里的addCount的值
            this.bomData.forEach(bom=>{
                this.matData.forEach(mat=>{
                    if(bom.id === mat.id){
                        mat.addCount = bom.addCount;
                    }
                })
            })
            console.log(this.bomData,"更新了数据");
        },
        assessData() {
            this.matData = [];
            this.localData = this.localData.map(item => {
                this.matData.push({
                    ...item, addCount: 0
                })
            });
        },
        handleChanged(currentNum) {
            this.queryParams.page = currentNum;
            this.loadMaterialData();

        },
        handleBindBomDialogClosed(){
            this.binBomDialogVisible = false;
        },
        handleBindSuccess(){
            this.$emit('bindSuccess')
            this.binBomDialogVisible = false;
        },
        //获取物料分类信息
        loadClassifyInfo() {
            this.types=[];
            mdAPI.getMatProClassify((res) => {
                if (res.code === 200) {
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].category === 1) {
                            this.types.push({
                                value: result[i].idClassify,
                                label: result[i].name,
                            });
                        }
                    }
                    this.types.unshift({
                        label: '全部',
                        value: -1
                    });
                }
            });
        },
        handleSearch() {
            this.loadMaterialData();
        },
        loadMaterialData() {
            mdAPI.getMaterial(this.queryParams, ((res) => {
                if (res.code === 200) {
                    console.log(res.data);
                    this.localData = res.data;
                    this.total = parseInt(res.msg);
                    this.assessData();
                    this.loadBomSelectedHistory();

                }
            }))
        },
        handleAddChange(data) {

            //如果bomData里有这个数据，就直接修改数量，没有就添加进去
            if(this.bomData.some(item=>item.id === data.id)){
                this.bomData.map(item=>{
                    if(item.id === data.id){
                        item.addCount = data.addCount;
                    }
                })
                console.log(this.bomData,"修改了值");
            }else{
                this.bomData.push(data)
                console.log("添加了新值");
            }
        }
    },
    mounted() {
        this.loadMaterialData();
        this.loadClassifyInfo();
    }
}
</script>
<style scoped>
.footer {
    position: absolute;
    bottom: 30px;
}
</style>